import React from 'react'
import {
  Form,
  Modal,
  Row,
  Col,
} from 'antd'
import styles from './index.less'
import moment from 'moment'
import { productType } from 'utils/enumConfig'
import { LwjDownload } from 'components'
import { LwjUpload } from 'components'
import MaterialCateTree from './MaterialCateTree'
import MaterialTable from './MaterialTable'
import GeneralFilter from 'components/Filter/GeneralFilter'

const FormItem = Form.Item
const MaterialModal = ({
                         tableProps,
                         treeProps,
                         materialTypeItem,
                         dispatch,
                         onOk,
                         form: {
                           getFieldDecorator,
                           validateFieldsAndScroll
                         },
                         ...materialModalProps
                       }) => {

  const handleSubmit = () => {
    onOk()
  }

  const modalOpts = {
    ...materialModalProps,
    onOk: handleSubmit
  }

  /**
   * 定义筛选属性 表单相关
   * @type {{filterItems: *[], onFilterChange(*): void}}
   */
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'productName',
        title: '',
        placeholder: '物料名称/物料编码'
      }
    ],
    onFilterChange (value) {
      value.productTypeId = materialTypeItem.id
      dispatch({
        type: 'updateContractOrder/getMaterialList',
        payload: {
          ...value
        }
      })
    },
    col: 18
  }

  return (
    <Modal {...modalOpts}>
      <Row>
        <Col span={10}>
          <MaterialCateTree {...treeProps}/>
        </Col>
        <Col span={14}>
          <GeneralFilter {...filterProps}/>
          <MaterialTable {...tableProps}/>
        </Col>
      </Row>
    </Modal>
  )
}

export default Form.create()(MaterialModal)
